<include file="public@header"/>
<style>
    .controls {
        color: #999
    }

    .minwidth {
        width: 70px !important;
        padding: 6px 2px;
    }
    .w70{
        width:  80px !important;}
    .w100{
        width: 100px !important;
    }
    .inputw ,.w80{
        width: 80px !important;
    }
    .w160{
        width: 140px !important;
    }

</style>
</head>
<body>
<php>$type=''</php>
<div class="wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Rock/product')}">石材产品库</a></li>
        <li><a href="{:url('Rock/producttypeadd')}">新增石材产品</a></li>
        <li class="active"><a href="">编辑商品墓</a></li>
    </ul>
    <form method="post" class="form-horizontal js-ajax-form" action="{:url('Rock/productspedit')}" style="width:100%; float:left">
        <fieldset>
                <div class="p_title">
                    <span class="span_title">基础信息</span>
                </div>
                <div class="control-group1-p">
                    <div class="control-group" style="float:left;margin-bottom: -20px;margin-left: -14px;">
                        <label class="control-label">状态:</label>
                        <div class="col-md-2">
                            <select class="form-control" name="pro_status" style="width: 136px">
                                <if condition="$pro_status eq 1">
                                    <option value="1" selected>启用</option>
                                    <option value="2">停用</option>
                                    <else/>
                                    <option value="1">启用</option>
                                    <option value="2" selected>停用</option>
                                </if>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">在产状态:</label>
                        <div class="col-md-2">
                            <select class="form-control" name="if_create" style="width: 136px">
                                <if condition="$if_create eq 1">
                                    <option value="1" selected>在产</option>
                                    <option value="2">停产</option>
                                    <else/>
                                    <option value="1">在产</option>
                                    <option value="2"selected>停产</option>
                                </if>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">产品名称:</label>
                        <div class="col-md-2" style="width: 12%">
                            <input type="hidden" name="id" required value="{$id}">
                            <input type="hidden" name="mb[pro_code]" required value="{$pro_code}">
                            <input type="hidden" name="mb[pro_type]" required value="{$pro_type}">
                            <input type="hidden" name="mb[pro_base]" value="{$pro_base}">
                            <input type="hidden" name="mb[pro_railing]" value="{$pro_railing}">
                            <input type="hidden" name="mb[pro_annex]" value="{$pro_annex}">
                            <input type="text" class="form-control" name="mb[pro_name]" required value="{$pro_name}">
                        </div>
                        <label class="control-label inputw">规制:</label>
                        <div class="col-md-2" style="width: 8%">
                            <select class="form-control" id="regulation" name="mb[regulation]" style="width: 100px">
                                    <option value="1">单穴</option>
                                    <option value="2">双穴</option>
                                    <option value="3" >三穴</option>
                            </select>
                        </div>
                        <label class="control-label inputw">碑型:</label>
                        <div class="col-md-2" style="width: 8%">
                            <select class="form-control" id="stele_type" name="mb[stele_type]" style="width: 100px">
                                    <option value="1">立碑</option>
                                    <option value="2">卧碑</option>
                            </select>
                        </div>
                        <label class="control-label inputw">占地长度:</label>
                        <div class="col-md-2" style="width: 11%;">
                            <input type="text" class="form-control" style="width: 110px" name="mb[pro_length]" required
                                   value="{$pro_length}"> mm
                        </div>
                        <label class="control-label" style="width: 90px">占地宽度:</label>
                        <div class="col-md-2" style="width: 11%">
                            <input type="text" class="form-control" style="width: 110px" name="mb[pro_width]" required
                                   value="{$pro_width}"> mm
                        </div>
                        <label class="control-label" style="width: 90px">墓碑总高:</label>
                        <div class="col-md-2" style="width: 11%">
                            <input type="text" class="form-control" style="width: 110px" name="mb[pro_height]" required
                                   value="{$pro_height}"> mm
                        </div>
                    </div>
                    <div class="form-group"  >
                        <label class="control-label">产品图</label>
                        <div class="col-md-2" style="width: 24.1%">
                            <php>$img_url=cmf_get_image_preview_url($pro_photo);</php>
                            <input type="hidden" name="mb[pro_photo]" id="thumb" value="{$img_url}">
                            <a href="javascript:uploadOneImage('图片上传','#thumb');">
                                <h5 class="btn btn-primary">上传</h5>
                                <img src="{$img_url}" id="thumb-preview" width="135" style="cursor: hand"/>
                            </a>
                            <input type="button" class="btn btn-sm" onclick="$('#thumb-preview').attr('src','');$('#thumb').val('');return false;" value="取消图片">
                        </div>
                        <label class="control-label" style="width: 90px">价格:</label>
                            <div class="col-md-2" style="width: 8%">
                            <input type="text" class="form-control" style="width: 110px" name="mb[pro_price]" required value="{$pro_price}">
                        </div>
                    </div>

                </div>
                <div class="p_title">
                    <span class="span_title">墓碑信息</span>
                </div>
                <div class="control-group1-p">
                    <div class="form-group">
                        <label class="control-label" style="width: 140px;"></label>
                        <div class="col-md-2">
                            <input type="text" class="form-control minwidth" disabled value="宽">
                            <input type="text" class="form-control minwidth" disabled value="高">
                            <input type="text" class="form-control minwidth" disabled value="厚">
                        </div>
                    </div>
                    <div id="details"></div>
                    <div class="form-group">
                        <div class="col-md-10">
                            <label class="control-label w160">基础：</label>
                            <div class="col-md-8">
                                <select class="form-control" name="pro_base" jichu1 id="select_jichu" disabled  style="margin-left: -13px">
                                    <option value="1">整石</option>
                                    <option value="2" >贴面</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="basics" data-count="0"></div>
                    <div id="cover"></div>
                    <div class="form-group">
                        <div class="col-md-10">
                        <label class="control-label w160">有无栏杆：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="pro_railing" id="select_langan" disabled  style="margin-left: -13px">
                                <option value="1">有</option>
                                <option value="2">无</option>
                            </select>
                        </div>
                        </div>
                    </div>
                    <div id="railing" data-count=""></div>
                    <div class="form-group" style="width:100%">
                        <div class="col-md-10">
                        <label class="control-label w160">有无附件：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="pro_annex" id="select_fujian" disabled  style="margin-left: -13px">
                                <option value="1">有</option>
                                <option value="2" >无</option>
                            </select>
                        </div>
                        </div>
                    </div>
                    <div id="annex" data-count=""> </div>
                </div>
        </fieldset>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
            <a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js?v={:time()}"></script>
<script type="text/javascript" src="__STATIC__/js/layer/layer.js"></script>
<script>

    $(function () {
        $('#stele_type').val("{$stele_type}");
        $('#regulation').val("{$regulation}");
        $('#select_jichu').val("{$pro_base}");
        $('#select_langan').val("{$pro_railing}");
        $('#select_fujian').val("{$pro_annex}");
    })


    $(document).ready(function () {
        var json = {$annexJson},
            partjson = {$partJson},
            catejson = {$cateJson},
            html = "";

        $(function () {
            $('#details').append(getArrayHtml('details',partjson.details));
            var num =partjson.details.length+1;
            $('#basics').append(getArrayHtml('basics',partjson.basics,num));
            $('#cover').append(getArrayHtml('cover',partjson.cover));
            $('#railing').append(getArrayHtml('railing',partjson.railing));
            $('#annex').append(getHtmlAnnex(partjson.annex));
        })

        var getCateOption = function (annex_id=0) {
            var option='';
            $.each(catejson, function(i, n){
                if (n.id == annex_id){
                    option += "<option value='" + n.id + "' selected  data-stuff_money='"+n.stuff_money+"' data-action='"+n.stuff_unit+"'>" + n.name + "</option>";
                } else {
                    option += "<option value='" + n.id + "'  data-stuff_money='"+n.stuff_money+"' data-action='"+n.stuff_unit+"'>" + n.name + "</option>";
                }
            })
            return option;
        }
        var getAnnexOption = function (annex=0) {
            var option='';
            $.each(json, function (i, n) {
                if (n.id == annex){
                    option += "<option value='" + n.id + "' selected>" + n.name + "</option>";
                } else {
                    option += "<option value='" + n.id + "'>" + n.name + "</option>";
                }
            })

            return option;
        }
        var getArrayHtml = function(name,b_arr_json,num=0){
            console.log('-------------------------------------')
            var arr_html ='',ii=0,p_num=6000;
            $.each(b_arr_json, function (i, n) {
                ii=  i;
                arr_html+='<div class="form-group part_base" name="base">\n' +
                    '       <div class="col-md-2" style="width: 24%;padding-right: 0;padding-left: 17px;">\n' +
                    '           <label class="control-label w160" >'+n.iname+'：</label>\n' +
                    '           <input type="hidden" name="'+name+'['+ii+'][id]" value="'+n.id+'">\n' +
                    '           <input type="text" class="form-control minwidth iwidth" name="'+name+'['+ii+'][iwidth]" placeholder="宽" value="'+n.iwidth+'">\n' +
                    '           <input type="text" class="form-control minwidth iheight" name="'+name+'['+ii+'][iheight]" placeholder="高" value="'+n.iheight+'">\n' +
                    '           <input type="text" class="form-control minwidth ithick" name="'+name+'['+ii+'][ithick]" placeholder="厚" value="'+n.ithick+'"> mm\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width: 17%">\n' +
                    '           <label class="control-label inputw">材料种类：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <select class="form-control icate" name="'+name+'['+ii+'][icate]">\n' +getCateOption(n.icate)+ '</select>\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width:12%">\n' +
                    '           <label class="control-label w70">数量：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <input type="text" class="form-control inumber" name="'+name+'['+ii+'][inumber]" style="width:100px;"  value="'+n.inumber+'">\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width:13%">\n' +
                    '           <label class="control-label w100">材料价格：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <input type="text" class="form-control imaterial_price" name="'+name+'['+ii+'][imaterial_price]" style="width:100px;" value="'+n.imaterial_price+'">\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width:13%">\n' +
                    '           <label class="control-label w100">维修单价：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <input type="text" class="form-control irepair_price" name="'+name+'['+ii+'][irepair_price]" style="width:100px;" value="'+n.irepair_price+'">\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '       <div class="col-md-2" style="width:12%">\n' +
                    '           <label class="control-label w100">更换单价：</label>\n' +
                    '           <div class="col-md-4">\n' +
                    '               <input type="text" class="form-control ichange_price" name="'+name+'['+ii+'][ichange_price]" style="width:100px;" value="'+n.ichange_price+'">\n' +
                    '           </div>\n' +
                    '       </div>\n' +
                    '   </div>';
            })
            return arr_html;
        }

        var getHtmlAnnex = function(arr_json){
            console.log(annex)
            var arr_html='';
            $.each(arr_json, function (i, n) {
                arr_html = '<div class="form-group part_base" name="base">\n' +
                    '      <div class="col-md-2" style="width: 24%;padding-right: 0;padding-left: 17px;" >\n' +
                    '       <label class="control-label w160">选择附件：</label>\n' +
                    '           <input type="hidden" name="annex['+i+'][id]" value="'+n.id+'">\n' +
                    '       <div class=" ">\n' +
                    '            <select class="form-control" name="annex['+i+'][annex_id]">\n' +getAnnexOption(n.annex_id)+'</select>\n'+
                    '       </div>\n' +
                    '   </div>\n' +
                    '   <div class="col-md-2" >\n' +
                    '       <label class="control-label inputw">数量：</label>\n' +
                    '       <div class="col-md-2">\n' +
                    '           <input type="text" class="form-control" style="width: 70px" name="annex['+i+'][anumber]" value="'+n.anumber+'">\n' +
                    '       </div>\n' +
                    '   </div>\n' +
                    '   <div class="col-md-2" name="fujian" style=" width:50%">\n' +
                    '   </div>\n' +
                    '</div>';
            })

            return arr_html;
        }
        $(document).on('blur',".iwidth",function(){
            var obj = $(this).closest('.part_base');
            price_count(obj)
        });
        $(document).on('blur',".iheight",function(){
            var obj = $(this).closest('.part_base');
            price_count(obj)
        });
        $(document).on('blur',".ithick",function(){
            var obj = $(this).closest('.part_base');
            price_count(obj)
        });
        $(document).on('blur',".imaterial_price",function(){
            var obj = $(this).closest('.part_base');
            price_count(obj)
        })

        // 主要
        $(document).on('change',".icate",function(){
            var obj = $(this).closest('.part_base');
            var stuff_money = obj.find('.icate').children('option:selected').data('stuff_money');
            obj.find('.imaterial_price').val(stuff_money)
            price_count(obj)
        });

        var price_count = function(obj){
            var iwidth = obj.find('.iwidth').val()/1000,
                iheight = obj.find('.iheight').val()/1000,
                ithick = obj.find('.ithick').val()/1000,
                imaterial_price =  obj.find('.imaterial_price').val();
            console.log(iwidth)
            console.log(iheight)
            console.log(ithick)
            var change_price = 0;
            if(iwidth != '' && iheight !='' && ithick !=''  && imaterial_price != ''){
                change_price = iwidth*iheight*ithick*imaterial_price;
                change_price = change_price.toFixed(2);
            }
            obj.find(".ichange_price").val(change_price);
        };

    })
</script>
